<template>
  <avue-tree :option="option"
             :data="data"
             v-model="form">
  </avue-tree>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      data: [],
      option: {
        virtualize: true,
        formOption: {
          labelWidth: 100,
          column: [{
            label: '自定义项',
            prop: 'label'
          }],
        },
      }
    }
  },
  mounted () {
    const getKey = (prefix, id) => {
      return `${prefix}-${id}`
    }
    const createData = (
      maxDeep,
      maxChildren,
      minNodesNumber,
      deep = 1,
      key = 'node'
    ) => {
      let id = 0
      return Array.from({ length: minNodesNumber })
        .fill(deep)
        .map(() => {
          const childrenNumber =
            deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
          const nodeKey = getKey(key, ++id)
          return {
            id: nodeKey,
            label: nodeKey,
            children: childrenNumber
              ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
              : undefined,
          }
        })
    }
    this.data = createData(4, 30, 40)

  }
}
</script>